<template>
  <div class="collection">
    <van-tabs v-model="active">
      <van-tab title="收藏">
        <van-swipe-cell v-for="(item, index) in list" :key="index">
          <van-card
            num="1"
            :price="item.retailPrice | Price"
            :desc="item.brief"
            :title="item.name"
            class="goods-card"
            :thumb="item.picUrl"
            @click="toGoodsDetail(item.valueId)"
          />
          <template #right>
            <van-button
              square
              text="取消"
              type="danger"
              class="delete-button"
              @click="del(item.valueId)"
            />
          </template>
        </van-swipe-cell>
      </van-tab>
      <van-tab title="专题">
        <van-empty
          :image="require('../assets/undraw_Hiking_re_k0bc01.png')"
          description="暂时没有噢"
      /></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs, SwipeCell, Card, Button, Toast, Empty } from "vant";
import API from "@/utils/api.js";
export default {
  name: "Collection",
  data() {
    return {
      active: 0,
      list: [],
      show: true,
    };
  },
  created() {
    this.$get(API.GET_COLLECT_LIST, {
      type: 0,
    }).then((res) => {
      console.log(res);
      this.list = res.data.list;
    });
  },
  methods: {
    del(valueId) {
      this.$post(API.POST_COLLECT_ADDORDELETE, {
        type: 0,
        valueId: valueId,
      }).then((res) => {
        console.log(res);
      });
      let index = this.list.findIndex((item) => {
        if (item.valueId == valueId) {
          return true;
        }
      });
      this.list.splice(index, 1);
      Toast.success("取消收藏成功");
    },
    toGoodsDetail(valueId) {
      this.$get(API.GET_GOODS_DETAIL, {
        token: this.$store.state.token,
        id: valueId,
      }).then((res) => {
        this.$router.push({ path: "/goodsdetail", query: { id: valueId } });
      });
    },
  },
  filters: {
    Price: (value) => {
      return value + ".00";
    },
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [SwipeCell.name]: SwipeCell,
    [Button.name]: Button,
    [Card.name]: Card,
    [Toast.name]: Toast,
    [Empty.name]: Empty,
  },
};
</script>

<style lang="less" scoped>
.collection {
  margin-top: 46px;
  .delete-button {
    height: 100%;
  }
  .van-card__price {
    color: rgb(238, 74, 74);
  }
}
</style>